<template>
	<div class="main">
		<form>
			<p>
				<h3>信息提交页</h3>
			</p>
			<p>
				<label>姓名</label><input type="text" v-model.lazy.trim="uname" />
			</p>
			<p>
				<label>性别：</label>
				<input type="radio" value="1" name="gender" v-model.number='gender' />男
				<input type="radio" value="0" name="gender" v-model.number='gender' />女
			</p>
			<p>
				<label>身份：</label>
				<select v-model.number='post'>
					<option value ="" disabled>--请选择--</option>
					<option value="1">组长</option>
					<option value="2">组员</option>
				</select>
			</p>
			<p>
				<input type="button" value="提交" @click="btn()" />
			</p>
		</form>
		<MyList :msg='objmsg'></MyList>
	</div>
</template>

<script>
//1.引入子组件
import MyList from'./MyList.vue';	
	
//导出当前组件
export default{
	name:'MyForm',
	data(){
		return{
			uname:'',
			gender:1,
			post:'',
			objmsg:{}
		}
	},
	
	//调用子组件列表
	components:{
		MyList
	},
	methods:{
		btn(){
			if(this.uname!='' && this.post != ''){
				this.objmsg = {
					uname:this.uname,
					gender:this.gender,
					post:this.post
				}
			}
		}
	}
}
</script>


<style scoped>
	.main form{
		width: 100%;
		border: 1px solid gainsboro;
		overflow: hidden;
		border-radius: 6px;
	}
	.main h3{
		width: 100%;
		line-height: 55px;
		color: #00936c;
		margin: 0px;
		text-align: center;
	}
	.main p {
		margin: 0;
		line-height: 55px;
	}
	.main p label{
		display: inline-block;
		width: 20%;
		text-align: right;
		/* letter-spacing: 20px;  这是什么意思*/
	}
	.main p input[type='text']{
		width: 70%;
		border: none;
		border: 1px solid gainsboro;
		border-radius: 6px;
		line-height: 35px;
		text-indent: 1em;
		outline: none;
	}
	.main p select{
		height: 35px;
		border: 1px solid gainsboro;
		border-radius: 6px;
		width: 70%;
	}
	.main p input[type='button']{
		width: 90%;
		border: none;
		background-color: #42B983;
		color: white;
		font-weight: bold;
		margin-left: 5%;
		line-height: 35px;
		border-radius: 6px;
	}
</style>
